<template>
  <div>
    <template>

      <Card style="width:1050px;margin: auto;">
        <row type="flex" justify="space-between">
          <i-col>
            <br>

            <span class="key" style="margin-left: 20px;margin-right: 40px">成品类型代码:</span>
            <Select v-model="formLeft.categoryCode" clearable style="width: 180px" filterable>
              <Option v-for="item in CategoryFindAllList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left: 50px">色号代码:</span>
            <Select v-model="formLeft.colorCode" clearable style="width: 180px;margin-left: 40px" filterable>
              <Option v-for="item in colorList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left: 50px">颜色代码:</span>
            <Select v-model="formLeft.ColourCode" clearable style="width: 180px;margin-left: 20px" filterable>
              <Option v-for="item in ColourList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>
            <br>
            <br>

            <span class="key" style="margin-left: 20px;margin-right: 12px">成品笔头类型代码:</span>
            <Select v-model="formLeft.typeCode" clearable style="width: 180px" filterable>
              <Option v-for="item in TypeList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left:50px;margin-right: 10px">成品材质代码:</span>
            <Select v-model="formLeft.materialQualityCode" clearable style="width: 180px;margin-left: 2px" filterable>
              <Option v-for="item in MaterialQualityList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left: 50px">弹簧代码:</span>
            <Select v-model="formLeft.springCode" clearable style="width: 180px;margin-left: 20px" filterable>
              <Option v-for="item in SpringList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <br>
            <br>
            <span class="key" style="margin-left: 20px;margin-left: 20px">规格代码:</span>
            <Select v-model="formLeft.specificationCode" clearable style="width: 180px;margin-left: 65px" filterable>
              <Option v-for="item in SpecificationsList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left: 52px">型号代码:</span>
            <Select v-model="formLeft.modelCode" clearable style="width: 180px;margin-left:40px" filterable>
              <Option v-for="item in modelList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <br><br>
            <div style="height: 10px">
              <span class="key" style="margin-left: 20px">价格/元:</span>
              <InputNumber :max="100000" :min="0.0001" v-model="formLeft.price" :maxlength="10"
                           placeholder="请输入价格,如:0.1"
                           style="width:180px;margin-left: 75px;"></InputNumber>

              <div style="margin-left: 600px;margin-top: -35px">
                {{ formLeft.code }}
              </div>
            </div>

            <br><br>
            <span class="key" style="margin-left: 20px">描述:</span>
            <Input type="textarea" v-model="formLeft.describe" style="width:180px;margin-left: 92px"></Input>

            <span class="key" style="margin-left: 50px">合成名称:</span>
            <Input v-model="formLeft.name" style="width:180px;margin-left: 40px"></Input>

            <br><br>

            <Button type="info" @click="find" style="float: left;margin-left: 250px">合成编码</Button>

            <Button type="primary" @click="RawMaterialInsert" style="margin-left: 300px">
              <Icon type="md-add"/>
              添加
            </Button>
          </i-col>
        </row>
      </Card>


    </template>
  </div>
</template>

<script>
  import {
    CategoryFindAll, TypeFindAll, MaterialQualityFindAll, SpringFindAll,
    SpecificationsFindAll, ColorFindAll, ColourFindAll, ModelFindAll, ProductInsert
  } from "../../../api/data"

  export default {
    data() {
      return {
        page: 1,//page 第几页
        pageSize: 1000,//pageSize:每页几条数据
        CategoryFindAllList: [],
        TypeList: [],
        MaterialQualityList: [],
        SpringList: [],
        SpecificationsList: [],
        colorList: [],
        ColourList: [],
        modelList: [],
        makingsState: '成品笔',
        state: '1',
        formLeft: {
          id:'',
          categoryCode: '',
          typeCode: '',
          materialQualityCode: '',
          springCode: '',
          specificationCode: '',
          colorCode: '',
          ColourCode: '',
          modelCode: '',
          price: 0,
          code: '',
          describe: '',
          name: ''
        },
      }
    },
    mounted() {
      //类型
      this.CategoryFindAll();
      //弹簧
      this.SpringFindAll();
      //色号
      this.ColorFindAll();
      //颜色
      this.ColourFindAll();
      //型号
      this.ModelFindAll();
      //类型
      this.TypeFindAll();
      //材质
      this.MaterialQualityFindAll();
      //规格
      this.SpecificationsFindAll()
    },
    methods: {
      CategoryFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState: this.makingsState,
          state: this.state
        };
        CategoryFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.CategoryFindAllList = data.data.data.list;
          }
        })
      },
      TypeFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          materialClassificationCode: this.formLeft.materialClassificationCode,
          state: this.state
        };
        TypeFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.TypeList = data.data.data.list;
          }
        })
      },
      MaterialQualityFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState:'原材料',
          materialClassificationCode: this.materialClassificationCode,
          state: this.state
        };
        MaterialQualityFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.MaterialQualityList = data.data.data.list;
          }
        })
      },
      SpringFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
        };
        SpringFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.SpringList = data.data.data.list;
          }
        })
      },
      SpecificationsFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState:'原材料',
          state: this.state
        };
        SpecificationsFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.SpecificationsList = data.data.data.list;
          }
        })
      },
      ColorFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          state: this.state
        };
        ColorFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.colorList = data.data.data.list;
          }
        })
      },
      ColourFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          state: this.state
        };
        ColourFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.ColourList = data.data.data.list;
          }
        })
      },
      ModelFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState: this.makingsState,
          state: this.state
        };
        ModelFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.modelList = data.data.data.list;
          }
        })
      },
      find() {
        if (this.formLeft.categoryCode.length <= 0 ) {
          this.formLeft.categoryCode = 'xx'
        }

        if (this.formLeft.colorCode.length <= 0) {
          this.formLeft.colorCode = 'xxx'
        }
        if (this.formLeft.ColourCode.length <= 0) {
          this.formLeft.ColourCode = 'xxxx'
        }

        if (this.formLeft.typeCode.length <= 0) {
          this.formLeft.typeCode = 'x'
        }
        if (this.formLeft.materialQualityCode.length <= 0) {
          this.formLeft.materialQualityCode = 'xx'
        }
        if (this.formLeft.springCode.length <= 0) {
          this.formLeft.springCode = 0
        }
        if (this.formLeft.specificationCode.length <= 0) {
          this.formLeft.specificationCode = 'xx'
        }

        if (this.formLeft.modelCode.length <= 0) {
          this.formLeft.modelCode = 'xxxx'
        }

        this.formLeft.code = this.formLeft.categoryCode+ this.formLeft.colorCode + this.formLeft.ColourCode
          + this.formLeft.typeCode + this.formLeft.materialQualityCode + this.formLeft.springCode +
          this.formLeft.specificationCode + this.formLeft.modelCode;
      },

      RawMaterialInsert() {
        if (this.formLeft.code.length==0){
          this.find();
        }
        ProductInsert(this.formLeft).then(res => {
          if (res.data.code==0){
            this.$Message.success("编辑成功");
            this.$router.go(-1);
          } else {
            this.$Message.error( "添加失败");
          }

        })
      },

      back() {
        this.$router.go(-1);
      },

    }
  }
</script>

<style>
  .width-condition {
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
  }

</style>
